 

    /*************store************/ 
    var state = {
        list: [{"id":1, "name": "001"}],
        lifes:[]
    };
    var mutations = {
        ADDITEM: function(argState, item){
            argState.list.push(item);
        },
        ADDLife: function(argState, item){
            argState.lifes.push(item);
        },
        setTopItem: function(argState, item){
            argState.lifes[argState.lifes.length - 1].eventName += item
        }
    };
    var getters = {
        getList:function(argState){
            return argState.list;
        },
        getLifes:function(argState){
            return argState.lifes;
        }
    }
    var actions = {
        addItem:function(dis,item){
            dis.commit('ADDITEM',item);
        },
        addLife: function(dis,item){
            dis.commit('ADDLife', item)
        },
        setTopItem: function(dis,item){
            dis.commit('setTopItem', item);
        }
    }
    var _storeObj = new Vuex.Store({
        "state": state,
        "mutations": mutations,
        "getters": getters,
        "actions": actions
    });
    /*****************************/

    /***********下拉列表页组件**************/
    var inputComp = {
        render:function(createElement){
            var self = this; 
            return createElement('div',{
                attrs:{
                    "data-id": "001"
                },
                class:{
                    "form-inline":true
                },
                style:{
                    "display": "inline-block"
                }
            },[createElement('input',{
               attrs:{
                   type: 'text'
               },
               class:{
                    "form-control": true
               },
               domProps:{
                   value: self.value
               },
               on:{
                   input:function(event){
                       self.value = event.target.value;
                   }
               } 
            }),createElement('button',{
                on:{
                    "click": function(event){
                       self.$store.dispatch('addItem',{"id":2,"name": self.value});
                    }
                },
                class:{
                    "btn":true,
                    "btn-primary": true
                },
                domProps:{
                    type: 'button'
                }
            },"添加")]);
        }
    };
    //下拉列表组件
    var ComboComp = {
        render:function(createElement){ 
            var self = this;
            return createElement("div",{
                attrs:{
                    "data-id": "ComboComp"
                },
                class:{
                    "dropdown":true
                },
                style:{
                    "display": "inline-block"
                }
            },[
                createElement("button",{
                    class:{
                        "btn": true,
                        "btn-default": true,
                        "dropdown-toggle": true
                    },
                    attrs:{
                        "type": "button",
                        "id": "dr02",
                        "data-toggle": "dropdown"
                    }
                },[ createElement("span", "选择"), createElement("span",{
                    class:{
                        "caret":true
                    }
                })])
                ,
                createElement("ul",
                {
                    class:{
                        "dropdown-menu":true
                    },
                    attrs:{
                        "aria-labelledby":"dr02"
                    }
                }, self.$store.getters["getList"].map(function(item){
                    return createElement("li",item.name);
                }))
            ])
        }
    };

    //组件 
    var form = {
        template: '<div style="width:400px; margin: 10px auto;" ><inputComp></inputComp> <ComboComp></ComboComp> </div>',
        components:{
            inputComp,
            ComboComp
        }
    };

    

    /***********子路由********** */
    var comp = {
        template: '<div style="width:400px; margin: 10px auto;" >'
        + '<nav class="nav nav-pills" >'
        + '<li><router-link to="/comp/compA" >compA</router-link></li>'
        + '<li><router-link to="/comp/compB" >compB</router-link></li>'
        + '</nav>'
        + '<router-view></router-view>'
        +'</div>',
        components: {
            compA,
            compB
        }
    }; 

    
    var index = 1;
    var lifeUpdate = {
        template: '<div><span v-if="show" >触发VNode渲染，{{msg}}</span><button v-on:click="toggle" >button</button></div>',
        methods:{
            toggle: function(){
                this.show = !this.show;
            }
        },
        data: function(){
            return {
                show: false,
                msg: 'Msg'
            }
        },
        beforeUpdate: function(){ //最后一次修改渲染到DOM上数据的机会，不会导致重复执行渲染，而updated中修改状态会导致重复渲染
            //但在beforeUpdate中修改 $store，或者是$emit 来通知改变非本组件的VNODE，都会导致重复渲染
            this.msg = '我不导致重复渲染';
        }
    };

    var compA = {
        template: '<div class="jumbotron" >compA<lifeUpdate></lifeUpdate></div>',
        components:{
            lifeUpdate
        }
    },compB = {
        template: '<div>compB 列表[来源“选择下拉列表”]：<ul class="list-group" > <li class="list-group-item" v-for=" item in list" >{{item.name}}</li> </ul> </div>',
        computed: {
            list: function(){ 
                return this.$store.getters.getList;
            }
        }
    }; 

    /***********组件生命周期 */

    var lifeList = {
        template: '<ul class="list-group" >'
        + '<li class="list-group-item" v-for=" life in lifes" >执行序号：{{life.eventId}}，{{life.eventName}}</li>'
        +'</ul>',
        computed: {
            lifes: function(){
                return this.$store.getters.getLifes;
            }
        }
    };
    var compLife = {
        template: '<div style="width:400px; margin: 10px auto;" >'
        + '<span v-if="title!=null" >{{title}}</span>：' 
        + '<lifeList></lifeList>'
        +'</div>',
        data: function(){
            return {
                title: null
            }
        },
        components:{
            lifeList
        },
        methods: {
            addItem: function( item ){ 
                this.$store.dispatch('addLife', item)
            }
        },
        beforeCreate: function(){ 
            var self = this, obj = {eventId: index++, eventName: 'beforeCreate--nextTick'};
            this.$nextTick(function(){
                self.addItem(obj);
            });
        },
        created: function(){
            this.addItem({eventId: index++, eventName: 'created-----------------------'});
            this.title = '生命周期';
        },
        beforeMount: function(){
            this.addItem({eventId: index++, eventName: 'beforeMount'});
        },
        mounted: function(){ 
            this.addItem({eventId: index++, eventName: 'mounted'});
        },
        activated: function(){ //keep-alive激活时
            this.addItem({eventId: index++, eventName: 'activated'});            
        },
        deactivated: function(){            
            this.addItem({eventId: index++, eventName: 'deactivated'});
        },
        beforeDestroy: function(){
            this.addItem({eventId: index++, eventName: 'beforeDestroy'}); 
        },
        destroyed: function(){
            this.addItem({eventId: index++, eventName: 'destroyed'});
        },
        beforeRouteEnter: function(to, from, next){ 
            var obj = {eventId: index++, eventName: 'router: beforeRouteEnter--nextTick'};
            next(function(vm){
                vm.addItem(obj);
            })
        },
        beforeRouteUpdate: function(to, from, next){// 路由修改时 V2.2
            this.addItem({eventId: index++, eventName: 'router: beforeRouteUpdate'});
            next(true);
        },
        beforeRouteLeave: function(to, from, next){ //路由离开当前组件时
            this.addItem({eventId: index++, eventName: 'router: beforeRouteLeave'});
            next(true);
        }
    };

    //路由
    var routeropt = [ 
        { path: '', component: form },
        { path: '/form', component: form},
        { path: '/comp', component: comp, children:[
            { path: '', component: compA },
            { path: 'compA', component: compA },
            { path: 'compB', component: compB }
        ]},
        { path: '/life', component: compLife }
    ];
    var router = new VueRouter({ routes: routeropt });

    //自动安装了vuex和vue-route
    var app = new Vue({
        router,
        store: _storeObj
    }).$mount('#app'); 